<template>
  <div class="chat-container">
    <div class="chat-history" v-loading="loading">
      <div v-for="(message, index) in messages" :key="index" class="chat-record">
        {{ message.text }}
      </div>
    </div>
    <div class="chat-content">
      <textarea class="content" v-model="message" ></textarea>
      <button class="send-button" @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      loading: false,
      message: "",
      messages: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async sendMessage() {
      this.loading = true;
      let url = `http://45.32.125.42:8080/chat`;
      this.$axios.get(url, {params:{question: this.message}}).then(response => {
        this.messages = response.data;
        this.loading = false;
      }).catch(
        function (error) {
          this.loading = false;
          // 请求失败处理
          alert('请求失败！')
      });

      this.message = "";// 清空聊天记录框
    }
  },
};
</script>

<style scoped lang="less">
.chat-container {
  background-color: #EEEEEE;
  width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.chat-history {
  text-align: left;
}

.chat-record {
  display: flex;
  height: 50px;
}

.chat-content {

}
.content {
  width: 900px;
  height: 80px;
  border-radius: 5px;
  font-size: 18px;
}
.send-button {
  width: 80px;
  height: 50px;
  border-radius: 5px;
  cursor: pointer;
  background-color: #fff;
}
</style>
